<template>
    <div id="home" class="gi_page container home">
        <div class="left-side">
            <div class="panel">
                <a-row class="home__content">
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                        <div class="home__item">
                            <a-card  class="gradient-card" title="数据统计">
                                <a-grid :cols="24" :col-gap="3" :row-gap="3">
                                    <a-grid-item :span="{ xs: 24, sm: 24, md: 48, lg: 48, xl: 6, xxl: 6 }">
                                        <a-card
                                            class="general-card"
                                            :style="{
                                                    overflow:'hidden',
                                                    background: isDark
                                                      ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
                                                      : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
                                                  }"
                                        >

                                            <a-space class="time_detail">
                                                <div class="time_detail_title">已结金额</div>
                                                <a-statistic class="time_detail_content" :value="statisticsData?.settledAmount"
                                                             show-group-separator  :value-style="{color: '#4080FF',fontSize:'32px'}" >
                                                </a-statistic>
                                            </a-space>

                                        </a-card>
                                    </a-grid-item>
                                    <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
                                        <a-card
                                            class="general-card"
                                            :style="{
                                                    overflow:'hidden',
                                                    background: isDark
                                                      ? ' linear-gradient(180deg, #3D492E 0%, #263827 100%)'
                                                      : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
                                                  }"
                                        >
                                            <a-space class="time_detail">
                                                <div class="time_detail_title">未结金额</div>
                                                <a-statistic class="time_detail_content" :value="statisticsData?.unSettledAmount"
                                                             show-group-separator :value-style="{color: '#F9CC45',fontSize:'32px'}"/>
                                            </a-space>
                                        </a-card>
                                    </a-grid-item>
                                    <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
                                        <a-card
                                            class="general-card"
                                            :style="{
                                                    overflow:'hidden',
                                                    background: isDark
                                                      ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
                                                      : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
                                                  }"
                                        >
                                            <a-space class="time_detail">
                                                <div class="time_detail_title">订单总额</div>
                                                <a-statistic class="time_detail_content" :value="statisticsData?.orderAmount"
                                                             show-group-separator :value-style="{color: '#009A29',fontSize:'32px'}"/>
                                            </a-space>
                                        </a-card>
                                    </a-grid-item>
                                    <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
                                        <a-card
                                            class="general-card"
                                            :style="{
                                                    overflow:'hidden',
                                                    background: isDark
                                                      ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
                                                      : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
                                                  }"
                                        >
                                            <a-space class="time_detail">
                                                <div class="time_detail_title">订单数量</div>
                                                <a-statistic class="time_detail_content" :value="statisticsData?.orderCount"
                                                             show-group-separator :value-style="{color: '#14C9C9',fontSize:'32px'}"/>
                                            </a-space>
                                        </a-card>
                                    </a-grid-item>
                                </a-grid>
                            </a-card>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <div style="margin-top: 14px">
                <a-grid :cols="24" :col-gap="14" :row-gap="14">
                    <a-grid-item :span="24">
                        <a-row class="home__content">
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                                <div class="home__item">
                                    <a-spin style="width: 100%">
                                        <a-card class="gradient-card" title="数据趋势">
                                            <template #extra>
                                                <a-space direction="vertical" size="large">
                                                    <a-radio-group v-model="type" type="button" @change="checkData">
                                                        <a-radio value="1">进7天</a-radio>
                                                        <a-radio value="2">进30天</a-radio>
                                                    </a-radio-group>
                                                </a-space>
                                            </template>
                                            <Chart :option="chartOption" style="width: 100%; height: 370px"/>
                                        </a-card>
                                    </a-spin>
                                </div>
                            </a-col>
                        </a-row>
                    </a-grid-item>
                </a-grid>
            </div>
        </div>
        <div class="right-side">
            <a-grid :cols="24" :row-gap="14">
                <a-grid-item class="panel" :span="24">
                    <Carousel/>
                </a-grid-item>
                <a-grid-item class="panel" :span="24">
                    <Notice/>
                </a-grid-item>
            </a-grid>
        </div>
        <a-back-top :visible-height="100" target-container="#home"/>
    </div>
</template>

<script setup lang="ts">
import Carousel from './components/Carousel.vue'
import Notice from './components/Notice.vue'
const appStore = useAppStore()
const isDark = computed(() => appStore.theme === 'dark')
import handleIcon from '@/assets/icons/slider.svg'

defineOptions({name: 'Workplace'})
import {getStatistics, getPeriodAnalysis} from '@/apis/common/statics'
import {useChart} from '@/hooks'

const xAxis = ref<string[]>([])
const chartData = ref<number[]>([])
const textChartsData = ref<number[]>([]);
const type = ref('1');
const loading = ref(false)
import {type EChartsOption, graphic} from 'echarts'

import type * as T from '@/apis/common/type'
import {computed} from "vue";
import {useAppStore} from "@/stores";

const statisticsData = ref<T.StatisticsMchData>();
const statistics = async () => {
    getStatistics().then((res) => {
        statisticsData.value = res.data;
    })
}

onMounted(() => {
    statistics();
    checkData(1)
})

const checkData = (key: number) => {
    try {
        loading.value = false
        getPeriodAnalysis({timePeriod: key}).then((res) => {
            loading.value = true
            if (res.data) {
                xAxis.value = res.data.timeData
                chartData.value = res.data.orderAmount
                textChartsData.value = res.data.orderCount
            }
        })
    } finally {
        loading.value = false
    }
}

// 提示框
const tooltipItemsHtmlString = (items) => {
    return items
        .map(
            (el) => `<div class="content-panel">
        <p>
          <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
          <span>${el.seriesName}</span>
        </p>
        <span class="tooltip-value">
        ${el.value}
        </span>
      </div>`,
        )
        .join('')
}


const {chartOption} = useChart((isDark: EChartsOption) => {
    return {
        grid: {
            left: '40',
            right: 0,
            top: '20',
            bottom: '100',
        },
        legend: {
            bottom: 0,
            icon: 'circle',
            textStyle: {
                color: '#4E5969',
            },
        },
        xAxis: {
            type: 'category',
            offset: 2,
            data: xAxis.value,
            boundaryGap: false,
            axisLabel: {
                color: '#4E5969',
                formatter(value: number, idx: number) {
                    if (idx === 0) return ''
                    if (idx === xAxis.value.length - 1) return ''
                    return `${value}`
                },
            },
            axisLine: {
                lineStyle: {
                    color: isDark ? '#3f3f3f' : '#A9AEB8',
                },
            },
            axisTick: {
                show: true,
                alignWithLabel: true,
                lineStyle: {
                    color: '#86909C',
                },
                interval(idx: number) {
                    if (idx === 0) return false
                    if (idx === xAxis.value.length - 1) return false
                    return true
                },
            },
            splitLine: {
                show: true,
                interval: (idx: number) => {
                    if (idx === 0) return false
                    return idx !== xAxis.value.length - 1
                },
                lineStyle: {
                    color: isDark ? '#3F3F3F' : '#E5E8EF',
                },
            },
            axisPointer: {
                show: true,
                lineStyle: {
                    color: '#23ADFF',
                    width: 2,
                },
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter(value: any, idx: number) {
                    if (idx === 0) return value
                    if (value >= 1000) {
                        return `${value / 1000}k`
                    }
                    return `${value}`
                },
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: isDark ? '#3F3F3F' : '#E5E8EF',
                },
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            formatter(params) {
                const [firstElement] = params
                return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params)}
          </div>`
            },
            className: 'echarts-tooltip-diy',
        },
        series: [
            {
                name: '新增订单金额',
                data: chartData.value,
                type: 'line',
                smooth: true,
                showSymbol: false,
                color: isDark ? '#3D72F6' : '#246EFF',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 15,
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#E0E3FF',
                    },
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(17, 126, 255, 0.16)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(17, 128, 255, 0)',
                        },
                    ]),
                },
            },
            {
                name: '新增订单数量',
                data: textChartsData.value,
                type: 'line',
                smooth: true,
                showSymbol: false,
                color: isDark ? '#3D72F6' : '#d37826',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 15,
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#d37826',
                    },
                },
                areaStyle: {
                    opacity: 0.5,
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(211, 120, 38, 0.18)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(211, 120, 38, 0)',
                        },
                    ]),
                },
            }
        ],
        dataZoom: [
            {
                bottom: 40,
                type: 'slider',
                left: 40,
                right: 14,
                height: 14,
                borderColor: 'transparent',
                handleIcon: `image://${handleIcon}`,
                handleSize: '20',
                handleStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 4,
                },
                brushSelect: false,
                backgroundColor: isDark ? '#313132' : '#F2F3F5',
            },
            {
                type: 'inside',
                start: 0,
                end: 100,
                zoomOnMouseWheel: false,
            },
        ],
    }
})

</script>

<style scoped lang="scss">
.container {
    display: flex;
}

.left-side {
    flex: 1;
}

.right-side {
    width: 280px;
    margin-left: 14px;
}

.panel {
    background-color: var(--color-bg-2);
    border-radius: 4px;
    overflow: auto;
}

:deep(.panel-border) {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(var(--gray-2));
}

.moduler-wrap {
    border-radius: 4px;
    background-color: var(--color-bg-2);

    :deep(.text) {
        font-size: 12px;
        text-align: center;
        color: rgb(var(--gray-8));
    }

    :deep(.wrapper) {
        margin-bottom: 8px;
        text-align: center;
        cursor: pointer;

        &:last-child {
            .text {
                margin-bottom: 0;
            }
        }

        &:hover {
            .icon {
                color: rgb(var(--arcoblue-6));
                background-color: #e8f3ff;
            }

            .text {
                color: rgb(var(--arcoblue-6));
            }
        }
    }

    :deep(.icon) {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
        color: rgb(var(--dark-gray-1));
        line-height: 32px;
        font-size: 16px;
        text-align: center;
        background-color: rgb(var(--gray-1));
        border-radius: 4px;
    }
}

.time_detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    &_title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size:28px;
        font-weight: bold;
    }

    &_content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 30px;
        font-size: 16px;
    }
}


.statistic-prefix {
    display: inline-block;
    width: 32px;
    height: 32px;
    color: var(--color-white);
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
}

//.home {
//    padding: 0;
//
//    span.link {
//        cursor: pointer;
//        color: rgb(var(--arcoblue-6));
//        font-weight: bold;
//
//        &:hover {
//            opacity: 0.7;
//        }
//    }
//
//    &__content {
//        padding: 6px;
//    }
//
//    &__item {
//        padding: 6px;
//        box-sizing: border-box;
//    }
//
//    .backtop-icon {
//        cursor: pointer;
//    }
//}
</style>

<style lang="less" scoped>
// responsive
.mobile {
    .container {
        display: block;
    }

    .right-side {
        // display: none;
        width: 100%;
        margin-left: 0;
        margin-top: 16px;
    }
}
</style>
